<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <title></title>
    <style>
        .name {
            position: relative;
        }

        .arrUp {
            width: 0;
            height: 0;
            border: 5px solid transparent;
            border-bottom-color: #ccc;
            cursor: pointer;
        }

        .arrDown {
            width: 0;
            height: 0;
            border: 5px solid transparent;
            border-top-color: #ccc;
            margin-top: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="div1" class="container">
    <table class="table table-bordered table-hover">
        <thead id="thead" >
        <tr class="active info">
            <th data-direction="asc" data-sort="id">id
            </th>
            <th data-direction="asc" data-sort="name">姓名
            </th>
            <th data-direction="asc" data-sort="age">年龄
            </th>
            <th data-direction="asc" data-sort="sex">性别
            </th>
        </tr>
        </thead>
        <tbody id="tbody" class="t">

        </tbody>
    </table>
</div>
</body>
</html>
<script>
    function demo1(x1,num)//排序规则，num 1从小到大 其他，从大到小
    {
        if(num)
        {
            return function (object1, object2) {
                let a = object1[x1];
                let b = object2[x1];
                return a-b;
            }
        }
        return function (object1, object2) {
            let a = object1[x1];
            let b = object2[x1];
            return b-a;
        }
    }

    function sortBy(direction,type)
    {
        return function compare(a,b){
            let cm=0;
            let value=(direction==='desc'?1:-1);
            switch (type){
                case 'id':
                    if(a.stuid>b.stuid){
                        cm=value;
                    }
                    else{
                        cm=value*-1;
                    }
                    break;
                    case 'name':
                        if(a.stuname.toLowerCase()>b.stuname.toLowerCase()){
                            cm=value;
                        }
                        else{
                            cm=value*-1;
                        }
                        break;
                case 'age':
                    if(a.stuage>b.stuage){
                        cm=value;
                    }
                    else{
                        cm=value*-1;
                    }
                    break;
                case 'sex':
                    if(a.stusex.toLowerCase()>b.stusex.toLowerCase()){
                        cm=value;
                    }
                    else{
                        cm=value*-1;
                    }
                    break;
            }
            return cm;
        }
    }


    const student = [
        {
            stuid: '1001',
            stuname: '张三',
            stuage: 18,
            stusex: '男'
        },
        {
            stuid: '1002',
            stuname: '李四',
            stuage: 19,
            stusex: '女'
        },
        {
            stuid: '1003',
            stuname: '王五',
            stuage: 56,
            stusex: '男'
        },
        {
            stuid: '1004',
            stuname: '吴六',
            stuage: 18,
            stusex: '男'
        }
    ];//学生数组
    function come(data)//动态实现表格
    {
        let table='<tbody id="tbody">';
        for (var i=0;i<data.length;i++)
        {

            table+='<tr>';
            for (let demo in data[i]) {
                table+='<td>'+data[i][demo]+'</td>';
            }
            table+='</tr>';
        }
        table+='</tbody></table>';
        return table;
    }
    //动态生成的所有表格
    var comedo=document.getElementById('tbody');
    var test=come(student);
    comedo.innerHTML=test;

    document.querySelector('table').addEventListener('click'),(e)=>{
        if(e.target().matches('th')){
            let dir=e.target.dataset.direction;
            let sort=e.target.dataset.sort;
            student.sort(sortBy(dir,sort));
            e.target.dataset.direction=(dir==='asc'?'desc':'asc');
            test=come(student);
            console.log(student);
            comedo.innerHTML=test;
        }
    }

</script>